<template>
  <div class="naire-container">
    <div class="for-container">
      <component v-for="(component) in components" :key="component.id" :is="component.name" :toPic="component.id"></component>
    </div>
  </div>
</template>

<script>
import MultipleChoice from '@/components/MultipleChoice.vue'
import MultipleSelection from '@/components/MultipleSelection.vue'
import { EventBus } from '@/eventBus.js'
import GapFilling from '@/components/GapFilling.vue'
import Test from '@/components/Test.vue'

export default {
  name: 'Questionnaire',
  components: {
    GapFilling,
    MultipleChoice,
    MultipleSelection,
    Test
  },
  data () {
    return {
      components: []
    }
  },
  created () {
    EventBus.$on('custom-event', data => {
      this.components = data.message
    })
  }
}
</script>

<style lang="less" scoped>
</style>
